<template>
    <div class="section-header text-center">
        <h2 class="style2-h2 style2-h2--defult">Our Gallery</h2>
    </div>
    <div class="gallery__wrapper">
        <div class="row g-4">
            <div class="col-md-4">
                <div class="row g-4">
                    <div class="col-md-12">
                        <div class="gallery__item">

                            <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/1.png`]">
                                <template v-slot:button>
                                    <a class="position-relative" href="javascript:void(0);">
                                        <img src="/images/gallery/home4/1.png" alt="gallery image">
                                    </a>
                                    <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                                </template>
                            </FsLightboxModal>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="gallery__item">
                            <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/1.png`]">
                                <template v-slot:button>
                                    <a href="javascript:void(0);">
                                        <img src="/images/gallery/home4/2.png" alt="gallery image">
                                    </a>
                                    <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                                </template>
                            </FsLightboxModal>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-md-4">
                <div class="gallery__item">

                    <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/3.png`]">
                        <template v-slot:button>
                            <a href="javascript:void(0);">
                                <img src="/images/gallery/home4/3.png" alt="gallery image">
                            </a>
                            <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                        </template>
                    </FsLightboxModal>
                </div>
            </div>
            <div class="col-md-4" data-aos="fade-left" data-aos-duration="800">
                <div class="row g-4">
                    <div class="col-md-12">
                        <div class="gallery__item">
                            <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/4.png`]">
                                <template v-slot:button>
                                    <a href="javascript:void(0);">
                                        <img src="/images/gallery/home4/4.png" alt="gallery image">
                                    </a>
                                    <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                                </template>
                            </FsLightboxModal>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="gallery__item">
                            <FsLightboxModal :link="[`${$config.public.baseUrl}images/gallery/home4/5.png`]">
                                <template v-slot:button>
                                    <a href="javascript:void(0);">
                                        <img src="/images/gallery/home4/5.png" alt="gallery image">
                                    </a>
                                    <div class="gallery__item-view">
                                        <div class="view-icon">
                                            <i class="fa-solid fa-magnifying-glass"></i>
                                        </div>
                                    </div>
                                </template>
                            </FsLightboxModal>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="text-center">
            <nuxt-link to="/gallery" class="trk-btn trk-btn--rounded trk-btn--secondary4 mt-5">See All
                Gallery
                <span><span><i class="fa-solid fa-arrow-right"></i></span></span></nuxt-link>
        </div>

    </div>
</template>

<script>
import FsLightboxModal from '@/components/base/modals/FsLightboxModal.vue'
export default {
    components: { FsLightboxModal }
}
</script>